<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS-Corner-03 Canvas</title>
</head>
<style>
    body{
        background:#FFF;
        text-align:center;
    }
    #c1{
        color:#fff;
    }
    button{
        width: 80px;
        height: 30px;
        border-radius: 4px;
    }
    .main{
        display: flex;
        justify-content: center;
    }
    .operations{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .operate-btn{
        margin: 10px;
    }
</style>
<body>
    本页面<strong>需要</strong>启动服务器

    <h1>Canvas 给图片加滤镜效果</h1>
    <hr>
    <div class="main">
        <div class="left">
            <h2>原始图片</h2>
            <img src="clover.png" alt="clover">
        </div>
        <div class="operations">
            <button id='btnOrigin' class="operate-btn">原始</button>
            <button id='btnGray' class="operate-btn">变灰</button>
            <button id='btnYellow' class="operate-btn">变黄</button>
            <button id='btnBlackWhite' class="operate-btn">黑白</button>
            <button id='btnWatermark' class="operate-btn">文字水印</button>
        </div>
        <div class="right">
            <h2>Canvas显示</h2>
            <canvas id="c1" width="800" height="600"></canvas>
        </div>
    </div>
    <hr>

    <script>

        window.onload = function(){
            let oC = document.getElementById('c1')
            let gd = oC.getContext('2d')

            let w = oC.width
            let h = oC.height

            let oImg = new Image()
            oImg.src = 'clover.png'
            oImg.onload = function(){
                gd.drawImage(oImg, 0, 0)
            }

            let btnOrigin = document.querySelector('#btnOrigin')
            let btnGray = document.querySelector('#btnGray')
            let btnYellow = document.querySelector('#btnYellow')
            let btnBlackWhite = document.querySelector('#btnBlackWhite')
            let btnWatermark = document.querySelector('#btnWatermark')

            // 原始图显示：不做任何处理
            btnOrigin.addEventListener('click', function(e){
                gd.drawImage(oImg, 0, 0)
            })

            // 变灰：
            //  有多种算法，这里用取平均值法
            btnGray.addEventListener('click', function(e){
                gd.drawImage(oImg, 0, 0)

                let imageData = gd.getImageData(0, 0, w, h)
                let data = imageData.data

                for (let r = 0; r < h; r++) {
                    for (let c = 0; c < w; c++) {
                        data[(r*w+c)*4+0] = data[(r*w+c)*4+1] = data[(r*w+c)*4+2] =
                            (data[(r*w+c)*4+0] + data[(r*w+c)*4+1] + data[(r*w+c)*4+2]) / 3
                    }
                }

                gd.putImageData(imageData, 0, 0)
            })

            // 泛黄滤镜：
            //  去掉蓝色（b=0），红+绿=黄
            btnYellow.addEventListener('click', function(e){
                gd.drawImage(oImg, 0, 0)

                let imageData = gd.getImageData(0, 0, w, h)
                let data = imageData.data

                for (let r = 0; r < h; r++) {
                    for (let c = 0; c < w; c++) {
                        data[(r*w+c)*4+2] = 0
                    }
                }

                gd.putImageData(imageData, 0, 0)
            })

            // 黑白滤镜（比较值例：150）
            //  求RGB平均值Avg ＝ (R + G + B) / 3
            //  如果Avg >= 100，则新的颜色值为R＝G＝B＝255
            //  如果Avg < 100，则新的颜色值为R＝G＝B＝0
            //  255就是白色，0就是黑色
            btnBlackWhite.addEventListener('click', function(e){
                gd.drawImage(oImg, 0, 0)

                let imageData = gd.getImageData(0, 0, w, h)
                let data = imageData.data

                for (let r = 0; r < h; r++) {
                    for (let c = 0; c < w; c++) {
                        const avg = (data[(r*w+c)*4+0] + data[(r*w+c)*4+1] + data[(r*w+c)*4+2]) / 3
                        data[(r*w+c)*4+0] = data[(r*w+c)*4+1] = data[(r*w+c)*4+2] = avg > 150 ? 255 : 0
                    }
                }

                gd.putImageData(imageData, 0, 0)
            })
        
            btnWatermark.addEventListener('click', function(e) {
                gd.drawImage(oImg, 0, 0)

                gd.font = '18px "MS Yahei"'
                gd.fillStyle = '#d6d6d6'
                gd.fillText('码 路 工 人', 650, 540);

                gd.rotate((-10 * Math.PI) / 180);
                const wmWidth = 220;
                const wmHeight = 120;

                for (let i = 0; i < h + wmWidth * 2; i+=wmWidth) {
                    for (let j = 0; j < w + wmHeight * 2; j+=wmHeight) {
                        gd.fillText('码路工人', i, j);
                    }
                }

                // const url = c1.toDataURL('image/png')
                // const newImg = document.createElement('img')
                // newImg.src = url;
                // document.body.appendChild(newImg)
            })
        }
    </script>
</body>
</html>